<template>
  <el-drawer v-model="drawerVisible" title="搜索" direction="rtl" size="400px">
    <template #header>
      <span class="text-16px font-700">搜索</span>
    </template>
    <div class="search-drawer" style="height: 100%">
      <el-form
        ref="queryFormRef"
        :inline="true"
        :model="queryParams"
        class="-mb-15px"
        label-width="100px"
      >
        <el-form-item label="合同编码" prop="tplNo">
          <el-input
            v-model="queryParams.tplNo"
            placeholder="请输入合同编码"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="合同名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入合同名称"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="合同类型" prop="ctrType">
          <el-select v-model="queryParams.ctrType" placeholder="请选择合同类型" class="!w-240px" clearable>
            <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.CONTRACT_TYPE)"
              :key="dict.value"
              :value="dict.value"
              :label="dict.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="签署状态" prop="signStatus">
          <el-select v-model="queryParams.signStatus" placeholder="请选择状态" class="!w-240px">
            <el-option
            v-for="dict in statusList"
              :key="dict.value"
              :value="dict.value"
              :label="dict.name"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
// 定义 props 和 emits
const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:modelValue', 'search', 'reset'])

const statusList = ref([{
  name: '全部',
  value: ''
},{
  name: '待签署',
  value: 0
},{
  name: '已签署',
  value: 1
}])
// 控制抽屉显示
const drawerVisible = ref(false)

// 使用 computed 实现双向绑定
const queryParams = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 打开抽屉
function open() {
  drawerVisible.value = true
}

// 关闭抽屉
function close() {
  drawerVisible.value = false
}

// 搜索
function search() {
  close()
  emit('search', queryParams.value)
}

const queryFormRef = ref()
// 重置
function reset() {
  queryFormRef.value.resetFields()
  emit('reset', queryParams.value)
}

// 暴露 open 方法
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.search-drawer {
  ::v-deep {
    .el-form {
      height: 98%;
    }
  }
}
</style>
